### “Touchy, by Bonfire” Plugin Documentation by “Bonfire Themes”

# “Touchy, by Bonfire”

By: Bonfire Themes

First off, thank you for purchasing the Touchy plugin! This documentation will cover the ins and outs on how to get your newly-purchased WordPress plugin up and running, fast. Our goal was to make everything as simple and straighforward as possible, so without further delay, let's get you started!

## Table of Contents

1. Installation
2. Setup and customization
3. How to use icons on accordion menu
4. Adding descriptions to menu items
5. Highlighting a menu item
6. How to make use of the widget area?
7. Have a question?

### Installation - top

Installing the plugin couldn't be simpler.

1. In your WordPress installation, go to Plugins > Add New
2. Click on Upload
3. Use the form there to upload the touchy-by-bonfire.zip file
4. On the next screen, activate the plugin.

Once you've activated the plugin, the Touchy menubar will automatically appear on your site. Simply create a menu under Appearance > Menus as you normally would, and then attach it to the "Touchy, by Bonfire" location.

### Setup and customization - top

After installing the plugin, head to the WordPress Live Customizer under Appearance > Customize > Touchy Plugin. This where you'll find all the setup and customization options; enter your phone number and email address, change colors, icons, the function of buttons, etc. You'll find all options to be well categorized and explained in detail.

### How to use icons on accordion menu - top

As of update 1.3, you can add a wide variety of icons to Touchy's drop-down menu. To do so, you simply need to insert the icon code infront of the actual menu item's Navigation Label.

1. Let's head to Appearance > Menus and build a quick example.
2. Find the "Custom Links" box and into its URL textfield, insert whatever link you'd like
3. Into its Link Text textfield, copy-paste the following:
   `<i class="fa-solid fa-anchor"></i>Anchor`
4. Click the Add to Menu button

Now check your site and you should see the menu item inside the dropdown menu. Now we'll explain what does what.

What you entered into the "Link Text" textfield were both the icon and the text label.

This part is the icon: `<i class="fa-solid fa-anchor"></i>`
...and this part is the text label: `Anchor`

### The icon

To see the full range of icons available, head to the Font Awesome website here.

To use one of the icons available there, simply click on it and copy its HTML snippet into the WordPress menu builder as described above.

For example, let's say you want to link to your Twitter account. In that case, the full Navigation Label can be:
`<i class="fa-brands fa-twitter"></i>Twitter`
Or perhaps you'd like to link to page that lists your podcasts. In case, this would work:
`<i class="fa-solid fa-microphone-lines"></i>Podcasts`
Or, as a final example, you wish to link to a gallery page:
`<i class="fa-solid fa-camera-retro"></i>Image gallery`

### Secondary icon set

Starting with version 4.6, the Line Awesome icon set is also included in Touchy. Making use of it is very similar to Font Awesome. To see the icons available, simply head to https://icons8.com/line-awesome, click on the icon you'd like to use and copy-paste the code into your menu.

A few examples that you can paste into the menu editor:

`<i class="las la-charging-station"></i>Charge`
`<i class="las la-paw"></i>Puppy`

###

### Adding descriptions to menu items - top

As of version 2.0 of Touchy, menu descriptions can be added to menu items. If you don't see the "Description" text area when editing a menu item, be sure to enable it by clicking the "Screen Options" tab in the top right corner (under Appearance > Menus) and then ticking "Description."

Afterwards, just enter your desired description into the menu item's "Description" text area.

Note: This replaces the "text" class method that was available in previous versions.

### Highlighting a menu item - top

To highlight a menu item, simply add the "marker" class to the desired menu item's "CSS Classes" field. This can be done in the WordPress builder. If you don't see the "CSS Classes" field, enable it by opening the "Screen Options" tab in the top-right corner of the screen and making sure the "CSS Classes" checkbox is ticked.

### How to make use of the widget area? - top

As of version 2.0 of Touchy, there is an unstyled widget area included in the drop-down menu. As is expected for WordPress, you can add widgets under Apperance > Widgets and also in the Live Customizer under Appearance > Customize > Widgets.

The widget area can be used to insert social icons for example, given that you have a plugin that allows them to be entered via widgets. Or, if you know simple HTML and CSS, you can use the text widgets to add and style your own social icons. You can even embed a video (a showreel if you're an artist, perhaps), add a gallery, or even build yourself a fancy call-to-action button and link it to whereever you desire. The text widget accepts shortcodes, so the use of this area is really only limited by your creativity and cleverness; you can even add a slider if you have the necessary toolset in your installation. The only limiting factor to keep in mind is the width of the widget area, as it resides inside the drop-down menu.

### Have a question? - top

Should you have a questions, then you can easily reach us through our CodeCanyon profile here (use the contact form located in the bottom-right corner of the page): http://codecanyon.net/user/BonfireThemes

Go To Table of Contents